<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="110">
          <Collapse value="1">
            <Panel name="1">
              常规配置
              <div slot="content">
                <FormItem label="背景色">
                  <PnColorPicker size="small" v-model="backgroundColor" alpha recommend/>
                </FormItem>
                <FormItem label="边框颜色">
                  <PnColorPicker size="small" v-model="borderColor" alpha recommend/>
                </FormItem>
                <FormItem label="边框大小">
                  <InputNumber size="small" :max="1000" :min="0" v-model="borderWidth"></InputNumber>
                </FormItem>
                <FormItem label="边框圆角大小">
                  <InputNumber size="small" :max="1000" :min="0" v-model="borderRadius"></InputNumber>
                </FormItem>
                <FormItem label="阴影颜色">
                  <PnColorPicker size="small" v-model="shadowColor" alpha recommend/>
                </FormItem>
                <FormItem label="阴影大小">
                  <InputNumber size="small" :max="1000" :min="0" v-model="shadowBlur"></InputNumber>
                </FormItem>
                <FormItem label="文字对齐方式">
                  <Select size="small" v-model="textAlign" >
                    <Option v-for="item in titleTextAligns" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </div>
            </Panel>
            <Panel name="2">
              标题
              <div slot="content">
                <FormItem label="标题文本">
                  <Input size="small" v-model="titleStyle.text" placeholder=""/>
                </FormItem>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="titleStyle.color" alpha recommend/>
                </FormItem>
                <FormItem label="字体大小">
                  <InputNumber size="small" :max="1000" :min="1" v-model="titleStyle.fontSize"></InputNumber>
                </FormItem>
                <FormItem label="文字粗细">
                  <Select :transfer="true" size="small" v-model="titleStyle.fontWeight">
                    <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="外边距">
                  <Tooltip content="按顺序分别指定上、右、下、左" max-width="200" placement="left">
                    <Input size="small" v-model="titleStyle.margin" />
                  </Tooltip>
                </FormItem>
              </div>
            </Panel>
            <Panel name="3">
              图标
              <div slot="content">
                <FormItem label="图标选择">
                  <Select transfer size="small" v-model="iconStyle.clazz" >
                    <Option v-for="item in iconClazzs" :value="item.value" :key="item.value" :label="item.label">
                      <Icon :custom="'targetTendencyFont ' + item.value"></Icon> {{item.label}}
                    </Option>
                  </Select>
                </FormItem>
                <FormItem label="图标大小">
                  <InputNumber size="small" :max="1000" :min="1" v-model="iconStyle.size"></InputNumber>
                </FormItem>
                <FormItemPanel title="颜色">
                  <FormItem label="上升">
                    <PnColorPicker size="small" v-model="iconStyle.upColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="等于">
                    <PnColorPicker size="small" v-model="iconStyle.equalColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="下降">
                    <PnColorPicker size="small" v-model="iconStyle.downColor" alpha recommend/>
                  </FormItem>
                </FormItemPanel>
                <FormItem label="同步设为数值颜色">
                  <i-switch v-model="iconStyle.syncValueColor">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
              </div>
            </Panel>
            <Panel name="4">
              数值
              <div slot="content">
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="valueStyle.color" alpha recommend/>
                </FormItem>
                <FormItem label="字体大小">
                  <InputNumber size="small" :max="1000" :min="1" v-model="valueStyle.fontSize"></InputNumber>
                </FormItem>
                <FormItem label="文字粗细">
                  <Select :transfer="true" size="small" v-model="valueStyle.fontWeight">
                    <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="外边距">
                  <Tooltip content="按顺序分别指定上、右、下、左" max-width="200" placement="left">
                    <Input size="small" v-model="valueStyle.margin" />
                  </Tooltip>
                </FormItem>
                <FormItem label="基准值">
                  <Tooltip content="数据源数值会与此基准值进行比较，以此判断指标趋势状态：上升、等于、下降" max-width="200" placement="left">
                    <InputNumber size="small" v-model="valueStyle.baseValue"></InputNumber>
                  </Tooltip>
                </FormItem>
                <FormItem label="后缀">
                  <Input size="small" v-model="valueStyle.suffixText" placeholder=""/>
                </FormItem>
              </div>
            </Panel>
          </Collapse>
        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="TargetTendencyComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'
  import './iconfont/iconfont.css'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'TargetTendencyCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {
        titleTextAligns: [
          {label: '左对齐', value: 'flex-start'},
          {label: '右对齐', value: 'flex-end'},
          {label: '居中对齐', value: 'center'},
        ],
        iconClazzs: [
          {label: '图标1', value: 'ttFont-target1'},
          {label: '图标2', value: 'ttFont-target2'},
          {label: '图标3', value: 'ttFont-target3'},
          {label: '图标4', value: 'ttFont-target4'},
          {label: '图标5', value: 'ttFont-target5'},
          {label: '图标6', value: 'ttFont-target6'},
          {label: '图标7', value: 'ttFont-target7'},
          {label: '图标8', value: 'ttFont-target8'},
          {label: '图标9', value: 'ttFont-target9'}
        ]
      }
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        backgroundColor: 'component.compConfigData.backgroundColor',
        borderColor: 'component.compConfigData.borderColor',
        borderWidth: 'component.compConfigData.borderWidth',
        borderRadius: 'component.compConfigData.borderRadius',
        shadowColor: 'component.compConfigData.shadowColor',
        shadowBlur: 'component.compConfigData.shadowBlur',
        textAlign: 'component.compConfigData.textAlign',
        writingMode: 'component.compConfigData.writingMode',

        titleStyle: 'component.compConfigData.titleStyle',
        iconStyle: 'component.compConfigData.iconStyle',
        valueStyle: 'component.compConfigData.valueStyle',

      })
    }
  }
</script>

<style scoped>

</style>
